Type scale & tokens 字號比例

字型比例是一組應用級字型樣式,確保設計的一致性和靈活性。

Material Design 提供基於 Roboto 字型的 15 種樣式,包括標題、標籤和正文等,以實現統一排版。

Customizing Your Type Scale 自定義字型比例

字型型別區分

預設使用 "Major Second"(1.125)比例,14 號字型為基準,用於正文排版。

“Major Second scale (1.125)” 代表 Material Design 採用的一種 字型比例(type scale),用於確定不同字號之間的放大或縮小關係。1.125 是這個比例的 縮放因子,意味著每個連續的字號是前一個字號的 1.125 倍。每個字號都比上一個大 12.5%

調整字型比例

保持對比度:應避免相近字號,以提供更明顯的視覺對比。

減少樣式數量:大多數產品不需要 所有 15 種預設樣式,這5鍾字號是經典的合集
如果Material Design 字型縮放預設尺寸無法滿足你的需求,可以用其他數值代替,

Adjustable Axes 可調整的字型軸

變數字型可以調整多個屬性以適應不同設計需求,最常用的有字重(weight)、字級(grade)、寬度(width)和光學尺寸(optical size)

Weight 字重

字重決定了字型筆畫的粗細,常見的有常規(Regular)和加粗(Bold),但可變字型可以提供更豐富的粗細變化,讓字重幾乎無限。

× 字重過輕的字型在小尺寸下可能難以閱讀,建議標題用輕字重,正文用稍厚的字重。
× 過重的字型在小尺寸下可能影響可讀性。

2 Grade 字級

字級和字重類似,都會影響字型的粗細,但字級調整更細微,不會改變字型的整體寬度,適合在不同背景色或主題模式下最佳化字型對比度。

Roboto Flex 提供了 150 的正等級和200的負等級,但整體大小保持不變。
深色與淺色模式切換時,同樣的字重在黑色背景上會顯得更粗,調整字級可以讓它看起來更均衡。
字級調整可影響視覺重點而無需重新排版

3 Width 寬度

寬度決定了字型在水平方向上佔據的空間,更窄的字型可以讓更多字元排進一行,而較寬的字型適合用於強調或提升個性。

“N”字元寬度對比,從窄到寬變化明顯,適用於不同排版需求。Roboto Flex提供了從25-150的字元寬度
✓ 建議在標籤等小尺寸文字中,使用較窄的字型能更高效利用空間。
× 在工具欄等有限空間裡使用過寬的字型,會導致文字溢位或縮小。

4 Optical Size 光學尺寸

光學尺寸是一種字型的不同版本,針對在不同字號下的使用進行了最佳化。小字型需要更清晰的筆畫提高可讀性,而大字型則可以展現更多細節,並提供更多的字重和字寬選擇。。

Literata 具備連續的尺寸範圍,從7-72磅
✓ 建議使用與字型大小匹配的光學尺寸,以保證最佳可讀性。
× 避免小尺寸文字使用大尺寸字型樣式,會影響閱讀體驗。